<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>与背景联动的banner幻灯片</title>
		<style type="text/css">
			body {margin: 0px;padding: 0px;}
			#box {width: 100%;height: 300px;background-color: #4085d2;margin-top: 50px;}
			#f {width: 760px;height: 300px;margin: auto;position: relative;}
			#pic,#nav {margin: 0px;padding: 0px;list-style: none;}
			/*#pic*/
			#pic li {position: absolute;top: 0px;left: 0px;z-index: 1;}
			#pic .nowpic {z-index: 6;opacity: 1;}
			/*navbg*/
			.navbg {width: 140px;height: 26px;position: absolute;left: 50%;top: 260px;margin-left: -70px;z-index: 9;background: #000;border-radius: 20px;opacity: 0.5;}
			/*nav*/
			#nav {width: 140px;height: 26px;position: absolute;left: 50%;top: 260px;margin-left: -70px;z-index: 10;text-align: center;}
			#nav li {display: inline-block;background-image: url(img/bg.png);background-position: -87px -116px;width: 12px;height: 12px;margin-top: 8px;cursor: pointer;}
			/*#nav li:hover {background-position: -74px -116px;}*/
			#nav li.navnow {background-position: -74px -116px;}
		</style>
		<script src="../../js/jquery-1.11.3.js"></script>
		<script src="jquery.flash.js"></script>
	</head>

	<body>
		<div id="box">
			<div id="f">
				<ul id="pic">
					<li id="">
						<a href="#"><img src="img/1.jpg" width="760" height="300"></a>
					</li>
					<li>
						<a href="#"><img src="img/2.jpg" width="760" height="300"></a>
					</li>
					<li>
						<a href="#"><img src="img/3.jpg" width="760" height="300"></a>
					</li>
					<li>
						<a href="#"><img src="img/4.jpg" width="760" height="300"></a>
					</li>
					<li>
						<a href="#"><img src="img/5.jpg" width="760" height="300"></a>
					</li>
					<li>
						<a href="#"><img src="img/6.jpg" width="760" height="300"></a>
					</li>
					<li>
						<a href="#"><img src="img/7.jpg" width="760" height="300"></a>
					</li>
				</ul>
				<div class="navbg"></div>
				<ul id="nav">
					<li id="n1"></li>
					<li id="n2"></li>
					<li id="n3"></li>
					<li id="n4"></li>
					<li id="n5"></li>
					<li id="n6"></li>
					<li id="n7"></li>
				</ul>
			</div>
		</div>
		<h1 id="test"></h1>


	</body>

</html>